<template>
  <div class="table_wrapper">
    <el-table :data="list" border style="width: 100%" :header-cell-class-name="headClass"     :header-cell-style="headCellStyle" :cell-style="cellStyle" :cell-class-name="cellClass">
      <el-table-column
        v-for="item in fields"
        v-if="item.prop != 'oper'"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        :align="item.align">
      </el-table-column>
      <el-table-column
        v-for="item in fields"
        v-if="item.prop == 'oper'"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        :align="item.align">
        <template slot-scope="scope">
          <div v-if="panduan">
            <el-button size="mini" v-if="scope.row.publishFlag == '0'" type="success" @click="onHandle(scope.row,'publish')">发布</el-button>
            <el-button size="mini" v-if="scope.row.publishFlag == '0'" type="primary" @click="onHandle(scope.row,'update')">编辑</el-button>
            <el-button size="mini" v-else-if="scope.row.publishFlag == '1'" type="primary" @click="onHandle(scope.row,'detail')">查看详情 </el-button>
          </div>
          <div v-else>
            <el-button size="mini" v-for="v in item.btns" :key="v.type" :type="v.type" @click="onHandle(scope.row,v.type)">
              {{v.desc}}
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagenation-wrapper" v-if="page">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next,jumper"
        :page-sizes="pageSizes"
        :current-page="currentPage"
        :pageSize="pageSize"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        @prev-click="handlePrevClick"
        @next-click="handleNextClick"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  name: 'tableList',
  props: {
    list: {
      type: Array,
      default: () => []
    },
    fields: {
      type: Array,
      default: () => []
    },
    pagination: {
      type: Object,
    },
    total: {
      type: Number,
      default: 0
    },
    page: {
      type: Boolean,
      default: true
    },
    panduan: {
      type: Boolean,
      default: false
    }
  },
  watch:{
    pagination: {
      handler: function(newV) {
        console.log(newV);
        this.currentPage = newV.currentPage
        this.pageSize = newV.pageSize
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      pageSizes: [10,20,50,100],
      currentPage: 0,
      pageSize: 0,
    }
  },
  methods: {
    onHandle(row,type) {
      this.$emit('handle',{
        row: row,
        type: type
      })
    },
    handleSizeChange(val) {
      console.log(val);
      this.$emit('sizeChange',val)
    },
    handleCurrentChange(val) {
      console.log(val);
      this.$emit('currentChange',val)
    },
    handlePrevClick(val) {
      this.$emit('currentChange',val)
    },
    handleNextClick(val) {
      this.$emit('currentChange',val)
    },
    headCellStyle({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "";
      } else {
        return "";
      }
    },
    headClass({ row, rowIndex }) {
      return "head-class";
    },
    cellClass({ row, rowIndex }) {
      return "cell-class";
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
    },
  }
}
</script>
<style lang="less">
.table_wrapper {
  padding: 0 0.24rem;
  background-color: #fff;
  padding-bottom: 0.2rem;
  .el-table {
    font-size: 0.16rem;
    margin-bottom: 0.33rem;
    /deep/ tbody tr:hover > td {
      background-color: rgba(155, 155, 155, 0.12);
      opacity: 0.87;
      color: #000000;
      font-family: FZZZHONGJW;
    }
    /deep/ .el-table--border,
    .el-table--group {
      border: 0 none;
    }
  }
  .pagenation-wrapper {
    display: flex;
    justify-content: center;
    .el-pagination button, .el-pagination span:not([class*=suffix]) {
      height: 0.35rem !important;
      line-height: 0.35rem !important;
    }
    .el-pagination__editor.el-input {
      height: 0.35rem !important;
      line-height: 0.35rem !important;
      .el-input__inner {
        height: 0.35rem !important;
        line-height: 0.35rem !important;
      }
    }
    .el-pager li {
      height: 0.35rem !important;
      line-height: 0.35rem !important;
    }
    .el-pagination .el-select .el-input {
      height: 0.35rem !important;
      line-height: 0.35rem !important;
      .el-input__inner {
        height: 0.35rem !important;
        line-height: 0.35rem !important;
      }
      .el-input__icon {
        height: 0.35rem !important;
        line-height: 0.35rem !important;
      }
    }
  }
}
.el-table--border, .el-table--group {
  border: none;
}
.el-table--border::after,
.el-table--group::after {
  display: none;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
  content: "";
  position: absolute;
  background-color: #ebeef5;
  z-index: 1;
  display: none;
}
.el-table .el-table__header .head-class {
  font-size: 0.18rem;
  font-family: FZZZHONGJW;
  height: 0.65rem;
  background: rgba(114, 169, 233, 0.1);
  color: #34414f;
  padding: 0;
  border-top: 0 none;
  border-right: 0 none;
}
.el-table .cell-class {
  cursor: pointer;
  font-size: 0.16rem;
  color: #999;
  height: 0.6rem;
  padding: 0;
  font-family: FZZZHONGJW;
  border-right: 0 none;
  border-bottom: 0.01rem solid rgb(215, 215, 215);
}
.el-table .tr-parent {
  color: #000;
  font-weight: 700;
}
</style>